<template>
  <div class="nav-tab-container">
    <van-tabs
      class="van-tabs-life-channel"
      @click="handleChangeNavTab"
      :line-width="14"
    >
      <van-tab
        v-for="(tab, index) in tabList"
        :key="index"
        :title="tab.pageSignName"
      >
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'multiTab',
  props: {
    curTab: {
      type: Number,
      default: 0
    },
    tabList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleChangeNavTab(index) {
      if (this.curTab === index) {
        return;
      }
      this.$emit('selectLifeTab', index);
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-tab-container {
  padding-left: 11px;
  padding-right: 4px;
}
</style>
<style lang="scss">
.van-tabs-life-channel {
  .van-tabs__wrap {
    z-index: 1002;
    height: 41px !important;
  }

  .van-tab {
    line-height: 41px !important;
    flex-basis: 30% !important;
    font-size: 14px;
    color: #333;
    flex: 0 0 auto !important;
    padding: 0 7px;
    // min-width: 96px;
  }
  .van-tabs__line {
    height: 2px !important;
    border-radius: 1px;
    background-color: #e62525 !important;
    bottom: 20px;
  }
  .van-tab--active {
    font-weight: 500 !important;
    color: #e62525 !important;
    font-family: PingFangSC-Medium;
    font-size: 14px;
  }
  .van-tabs__nav {
    overflow-x: auto;
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 0;
  }
}
</style>
